<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue组件中emit events</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 采用 v-on(@) 监听自定义事件-->
        <my-com @increment="getCount"></my-com>

    </div>
    

    <script>
        // 子组件向父组件传递数据-----自定义事件
        Vue.component('my-com', {
            template: '<div><button @click="clickbtn">计数器</button></div>',
            data: function () {
                return {
                    count: 0,
                }
            },
            methods:{
                clickbtn: function (){
                    this.count++;
                    console.log(this.count);
                    // 把 count 的值传递给父组件,怎么实现?
                    // 自定义事件
                    // $emit: 触发事件
                    // para1: 事件名称
                    // para2: 传递的数据
                    this.$emit('increment',this.count);
                }
            }
        })

        new Vue({
            el: '#app',
            methods:{
                // 方法的参数就是 子组件触发自定义事件时 传递的数据
                getCount: function (event){
                    console.log(event);
                    
                    console.log("能监听到increment事件了");
                    
                }
            }

        })
    </script>
</body>

</html>